<template>
  <div id="bg">
    <div id="lottery">
      <h1 class="data-msg" v-if="userInfo && init">
        <span v-if="userInfo.dealer != null">{{ userInfo.dealer }}！</span>
        {{ userInfo.name }}
      </h1>
      <!-- :style="'left:-'+(440-pageWidth)+'px'" -->
      <!-- 修改转盘组件的使用方式 -->
      <div class="wheel-container" v-if="init">
        <LuckyWheel
          ref="myLucky"
          :width="pageWidth"
          :height="pageWidth"
          :prizes="prizes"
          :blocks="blocks"
          :buttons="buttons"
          @start="startCallback"
          @end="endCallback"
        />
      </div>
      <!-- <div class="award-show" v-if="init">
        <h2 class="font-bold">奖品介绍</h2>
        <p v-for="$i in prizesShow" :key="$i.rank">
          · {{ rankCount[$i.rank - 1] }}，{{ $i.fonts[0].text }}，{{ $i.fonts[1].text }}，{{
            $i.range
          }}个
        </p>
      </div> -->
    </div>
  </div>
  <van-popup v-model:show="awardPop" v-if="gettedAward && userInfo">
    <div class="award-popup">
      <img :src="gettedAward.img" alt="" width="100%" />
      <h2 v-if="gettedAward.rank != 7">{{ gettedAward.rank }}·{{ gettedAward.name }}</h2>
      <h3>{{ userInfo.name }}·{{ userInfo.phone }}</h3>
      <p>{{gettedAward.rank != 7 ? '恭喜获得' : '谢谢参与'}}</p>
      <van-button plain hairline block class="font-bold comfirm-btn" type="default">
        确 定
      </van-button>
    </div>
  </van-popup>
  <van-popup v-model:show="errorPop">
    <div class="award-popup">
      <img :src="luckNull" alt="" width="100%" />
      <p>{{ errorMsg }}</p>
    </div>
  </van-popup>
</template>
  
<script setup name="lotteryPage">
const { proxy } = getCurrentInstance()
import { ref, reactive } from 'vue'
import { getPrizeInfo, prizeVerify } from '@/api/activity/index'
import { getCustomerInfo } from '@/api/system/index'

import { LuckyWheel } from '@lucky-canvas/vue'
import luckBg from '../../assets/img/luck/luck-bg.png'
import luckArrow from '../../assets/img/luck/luck-arrow.png'
import luckNull from '../../assets/img/luck/rank-null.png'
import luckRank1 from '../../assets/img/luck/rank-1.png'
import luckRank2 from '../../assets/img/luck/rank-2.png'
import luckRank3 from '../../assets/img/luck/rank-3.png'
import luckRank4 from '../../assets/img/luck/rank-4.png'
import luckRank5 from '../../assets/img/luck/rank-5.png'
import luckRank6 from '../../assets/img/luck/rank-6.png'

const userInfo = reactive({
  name: '',
  dealer: '',
  phone: '',
  id: ''
})

const myLucky = ref(null)

const awardPop = ref(false)
const errorPop = ref(false)
const errorMsg = ref('')

const init = ref(false)
const pageWidth = ref(document.documentElement.clientWidth <= 480 ? '100vw' : 480)
const gettedAward = ref(null)
const rankCount = ref(['一等奖', '二等奖', '三等奖', '四等奖', '五等奖', '六等奖' , '谢谢参与'])
// 引入路由
const route = useRoute()
const prizes = ref([])
const prizesShow = ref(null)
onBeforeMount(async () => {
  init.value = false
  const prizeRes = await getPrizeInfo()
  const userRes = await getCustomerInfo({ mobile: route.query.phone })
  if (userRes.code !== 200) {
    showToast(userRes.msg)
    return false
  } else {
    if (userRes.data.verified) {
      errorMsg.value = '您已经参与过活动，无法重复参与'
      errorPop.value = true
      return false
    }
  }
  userInfo.dealer = userRes.data.dealerName
  userInfo.name = userRes.data.name
  userInfo.id = userRes.data.id
  userInfo.phone = userRes.data.phone

  // 测试数据
 //  prizeRes.data = { 1: 1, 2: 5, 3: 0, 4: 0, 5: 0, 6: 0, 7: 2400 }

  const prizeList = [
    {
      background: '#fff',
      range: prizeRes.data[1],
      rank: 1,
      fonts: [
        {
          text: '一等奖',
          fontSize: 14,
          top: '10%',
          fontColor: '#ff6b8b',
          fontWeight: 'bold',
          fontStyle: 'HYY3Cadillac-Bold'
        },
        {
          text: '车模',
          fontSize: 10,
          top: '35%',
          fontColor: '#666',
          fontStyle: 'HYY3Cadillac-Light'
        }
      ],
      imgs: [{ src: luckRank1, width: '45%', top: '55%' }]
    },
    {
      background: '#ffe7e9',
      range: prizeRes.data[6],
      rank: 6,
      fonts: [
        {
          text: '3元',
          fontSize: 14,
          top: '10%',
          fontColor: '#ff6b8b',
          fontWeight: 'bold',
          fontStyle: 'HYY3Cadillac-Bold'
        },
        {
          text: '立减3元券',
          fontSize: 10,
          top: '35%',
          fontColor: '#666',
          fontStyle: 'HYY3Cadillac-Light'
        }
      ],
      imgs: [{ src: luckRank6, width: '45%', top: '55%' }]
    },
    {
      background: '#ffffff',
      range: prizeRes.data[5],
      rank: 5,
      fonts: [
        {
          text: '5元',
          fontSize: 14,
          top: '10%',
          fontColor: '#ff6b8b',
          fontWeight: 'bold',
          fontStyle: 'HYY3Cadillac-Bold'
        },
        {
          text: '立减5元券',
          fontSize: 10,
          top: '35%',
          fontColor: '#666',
          fontStyle: 'HYY3Cadillac-Light'
        }
      ],
      imgs: [{ src: luckRank5, width: '45%', top: '55%' }]
    },
    {
      background: '#ffe7e9',
      range: prizeRes.data[4],
      rank: 4,
      fonts: [
        {
          text: '50元',
          fontSize: 14,
          top: '10%',
          fontColor: '#ff6b8b',
          fontWeight: 'bold',
          fontStyle: 'HYY3Cadillac-Bold'
        },
        {
          text: '立减50元券',
          fontSize: 10,
          top: '35%',
          fontColor: '#666',
          fontStyle: 'HYY3Cadillac-Light'
        }
      ],
      imgs: [{ src: luckRank4, width: '45%', top: '55%' }]
    },
    {
      background: '#ffffff',
      range: prizeRes.data[2],
      rank: 2,
      fonts: [
        {
          text: '二等奖',
          fontSize: 14,
          top: '10%',
          fontColor: '#ff6b8b',
          fontWeight: 'bold',
          fontStyle: 'HYY3Cadillac-Bold'
        },
        {
          text: '果冻包',
          fontSize: 10,
          top: '35%',
          fontColor: '#666',
          fontStyle: 'HYY3Cadillac-Light'
        }
      ],
      imgs: [{ src: luckRank2, width: '45%', top: '55%' }]
    },
    {
      background: '#ffe7e9',
      range: prizeRes.data[3],
      rank: 3,
      fonts: [
        {
          text: '100元',
          fontSize: 16,
          top: '10%',
          fontColor: '#ff6b8b',
          fontWeight: 'bold',
          fontStyle: 'HYY3Cadillac-Bold'
        },
        {
          text: '立减100元券',
          fontSize: 10,
          top: '35%',
          fontColor: '#666',
          fontStyle: 'HYY3Cadillac-Light'
        }
      ],
      imgs: [{ src: luckRank3, width: '45%', top: '55%' }]
    },
    ,
  ]

  prizes.value = prizeList.filter((e) => prizeRes.data[e.rank] > 0)
  console.log(prizes.value, '------------prizes.value----------')
  prizes.value.push({
    background: '#ffffff',
    range: prizeRes.data[7],
    rank: 7,
    fonts: [
      {
        text: '无',
        fontSize: 14,
        top: '10%',
        fontColor: '#ff6b8b',
        fontWeight: 'bold',
        fontStyle: 'HYY3Cadillac-Bold'
      },
      {
        text: '谢谢参与',
        fontSize: 10,
        top: '35%',
        fontColor: '#666',
        fontStyle: 'HYY3Cadillac-Light'
      }
    ],
    imgs: [{ src: luckNull, width: '45%', top: '55%' }]
  })
  prizes.value.map((e, ind) => {
    // 使用取模3来实现三个颜色循环
    const colorIndex = (ind + 1) % 3
    if (colorIndex === 1) {
      e.background = '#fff' // 白色
    } else if (colorIndex === 2) {
      e.background = '#fff4f5' // 浅粉色
    } else {
      e.background = '#ffe7e9' // 原有的粉色
    }
    return e
  })
  prizesShow.value = JSON.parse(JSON.stringify(prizes.value)).sort((a, b) => a.rank - b.rank)
  init.value = true
})

// 转盘配置
const blocks = ref([
  { padding: '35px' },
  {
    padding: '35px',
    imgs: [
      {
        src: luckBg,
        width: '100%',
        rotate: true
      }
    ]
  }
])

const buttons = ref([
  {
    radius: '40%', // 添加半径
    pointer: true,
    fonts: [{ text: '开始\n抽奖', top: '-20px', fontColor: '#fff' }],
    imgs: [
      {
        src: luckArrow,
        top: '-50px',
        width: '100px',
        heaght: '100px'
      }
    ]
  }
])

// 开始回调
const startCallback = () => {
  // 开始游戏
  myLucky.value.play()
  // 假设接口的请求速度是1s
  // 生成一个随机角度作为停止位置
  const randomAngle = Math.floor(Math.random() * 360)
  // 生成一个1到3秒之间的随机时间
  const randomTime = Math.floor(Math.random() * (3000 - 1000 + 1)) + 1000 // 1000毫秒 = 1秒
  setTimeout((_) => {
    // 停止游戏（使用1-3秒内随机时间）,并且使用随机角度
    myLucky.value.stop() //注意: 使用 range 属性时, stop 方法就不能传递中奖索引了, 否则 stop 传递的索引具有优先级, 会无视 range 属性;
  }, randomTime)
}

// 结束回调
const endCallback = async (prize) => {
  // 获取奖品名称和类型
  const prizeName = prize.fonts[0].text // 奖品金额
  const prizeType = prize.fonts[1].text // 奖品类型
  const prizeImg = prize.imgs[0].src // 奖品图片

  // 也可以获取完整的奖品信息
  const prizeInfo = {
    name: prizeName,
    type: prizeType,
    rank: rankCount.value[prize.rank - 1],
    background: prize.background,
    range: prize.range,
    img: prizeImg
  }
  const res = await prizeVerify({
    customerId: userInfo.id,
    prizeLevel: prize.rank
  })
  if (res.code !== 200) {
    errorMsg.value = prize.rank != 7 ? res.msg : '谢谢参与'
    errorPop.value = true
    return false
  }
  gettedAward.value = prizeInfo
  if (prize.rank) {
    gettedAward.value.rank = prize.rank
  }
  console.log('完整奖品信息：', gettedAward.value)
  awardPop.value = true
}
</script>
  
<style lang="less">
#bg {
  position: relative;
  width: 100vw;
  height: 100vh;
  max-width: 480px;
  margin: 0 auto;
  background: url(../../assets/img/c_bg2_less.png);
  background-size: 100% auto;
}
body {
  background-size: 100% auto;
}
#lottery {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  padding: 0 0 30px 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 1);

  h1 {
    width: 70%;
    margin: 0 auto;
    font-size: 18px;
    text-align: center;
    padding: 35px 0 10px 0;
    line-height: 36px;
    color: #fff;
    border-bottom: 0.5px solid #fff;
    span {
      display: block;
      font-size: 16px;
    }
  }
}
.wheel-container {
  width: 100%;
  position: relative;
  top: -15px;
}
.award-show {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  bottom: 0;
  padding: 20px 40px 30px 40px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: rgba(100, 100, 100, 0.1);
  border-radius: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  color: #fff;
  text-align: center;
  h2 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  p {
    line-height: 24px;
    font-size: 14px;
  }
}
.award-popup {
  padding: 40px 20px 20px 20px;
  background: #fff;
  width: 280px;
  height: auto;
  text-align: center;
  h2 {
    font-size: 24px;
  }
  h3 {
    margin: 15px 0;
    font-size: 16px;
  }
  p {
    font-size: 14px;
  }
  .comfirm-btn {
    margin-top: 30px;
    background: #000;
    color: #fff;
    border-radius: 0;
  }
  img {
    margin: 0 0 20px 0;
  }
}
</style>